<template>
    <l-data-panel 
    :label="data.title"
    isApp
    isMore
    >
        <div class= "l-rblock l-min-databoard " >
            <div :key="item.id" v-for="item in data.list" class="l-min-databoard__item" >
                <div class="num" >{{getValue(item)}}</div>
                <div class="label" >{{item.name}}</div>
            </div>
        </div>
    </l-data-panel>
</template>
<script>
export default {
    props: ['data','isPreview'],
    data () {
        return {
        }
    },
    computed:{
        
    },

    mounted(){
    },
    methods:{
        getValue(item){
            if(item.dataCode && this.lr_dataSourceData && item.dataValueKey){
                this.lr_loadDataSourceData(item.dataCode)
                const data = this.lr_dataSourceData[item.dataCode]
                if(data){
                    return data[0][item.dataValueKey]
                }
                else{
                    return 0
                }
            }
            else{
                return 0
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.l-min-databoard{
    display: flex;
    &__item{
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 8px;
        justify-content: center;
        min-width: 25%;
        box-sizing: border-box;

        .num{
            color: #000;
            font-size:16px;
            margin-bottom: 8px;
        }
        .label{
            font-size: 12px;
        }

    }
}
</style>

